<!--TODO 导航栏有点bug-->
<template>
  <div class="navigation dis-flex">

    <div
      class="navigation-icon-bg"
      :class="{ disabled: store.navigator.back_pointer === 0 }"
      title="后退"
      @click="$store.commit('matlab/moveBread', 'back')"
    >
      <div class="navigation-icon icon-back" />
    </div>

    <div
      class="navigation-icon-bg"
      :class="{ disabled: store.navigator.front_pointer === 0 }"
      title="前进"
      @click="$store.commit('matlab/moveBread', 'forward')"
    >
      <div class="navigation-icon icon-forward" />
    </div>

    <div
      class="navigation-icon-bg"
      :class="{ disabled: store.breadPath === store.username }"
      title="向上一级"
      @click="$store.commit('matlab/breadcrumbBack')"
    >
      <div class="navigation-icon icon-back-previous" />
    </div>

    <div
      class="navigation-icon-bg"
      title="浏览文件夹"
      @click="setBread('folder')"
    >
      <div class="navigation-icon icon-browse-fold" />
    </div>

    <div class="flex-max pos-rel breadcrumb">
      <div v-if="!isEdit" class="breadcrumb-mask" @click="searchFolder" />
      <div v-if="!isEdit" class="breadcrumb-bg dis-flex">
        <div class="bread-bg dis-flex">
          <div class="bread-data" @click="resetFolder({ id: 0 })">
            {{ firstBread.label }}
          </div>
          <i
            v-if="!firstBread.isShow && isFolderShow(firstBread.children)"
            class="el-icon-arrow-right"
            @click="choseBread(firstBread)"
          />
          <i
            v-if="firstBread.isShow && isFolderShow(firstBread.children)"
            class="el-icon-arrow-down"
          >
            <nav-menu
              v-if="firstBread.isShow && isFolderShow(firstBread.children)"
              :menu-list="firstBread.children.filter((item) => !item.isFile)"
              :callback="changeFolder"
              :father-index="0"
              class="menu-folder"
            />
          </i>
        </div>
        <div
          v-for="(item, index) in $store.state.matlab.breadcrumb"
          :key="item.id"
          class="bread-bg dis-flex"
        >
          <div class="bread-data" @click="resetFolder(item, index)">
            {{ item.label }}
          </div>
          <i
            v-if="!item.isShow && isFolderShow(item.children)"
            class="el-icon-arrow-right"
            @click="choseBread(item)"
          />
          <i
            v-if="item.isShow && isFolderShow(item.children)"
            class="el-icon-arrow-down"
          >
            <nav-menu
              v-if="item.isShow && isFolderShow(item.children)"
              :menu-list="item.children.filter((item) => !item.isFile)"
              :callback="changeFolder"
              :father-index="index + 1"
              class="menu-folder"
            />
          </i>
        </div>
      </div>

      <div v-else>
        <el-autocomplete
          v-model="state"
          v-focus
          popper-class="my-autocomplete"
          size="mini"
          :fetch-suggestions="querySearch"
          :trigger-on-focus="false"
          @select="handleSelect"
          @blur="inputBlur"
        >
          <template slot-scope="{ item }">
            <div class="dis-flex" @click="handleSelect(item)">
              <div class="icon-search-file icon-style" />
              <div class="name">{{ item.value }}</div>
            </div>
          </template>
        </el-autocomplete>
      </div>
    </div>
  </div>
</template>

<script>
/**
 * 面包屑导航（项目目录）
 */
import NavMenu from './dropdown-menu/NavMenu.vue';
export default {
  components: {
    NavMenu
  },
  data() {
    return {
      store: {},
      isEdit: false,
      firstBread: {
        label: this.$store.state.user.username,
        isShow: false,
        children: this.$store.state.matlab.originTreeData
      },
      activeItem: null,
      state: '',
      // TODO 这直接搬element 改都不改吗
      restaurants: []
    };
  },
  inject: ['setBread'],
  created() {
    this.$store.state.matlab.breadPath = this.$store.state.matlab.username;
    this.store = this.$store.state.matlab;
  },
  methods: {
    choseBread(item) {
      setTimeout(() => {
        this.activeItem = item;
        if (Object.keys(item).includes(item)) {
          item.isShow = true;
        } else {
          this.$set(item, 'isShow', true);
        }
        document.body.addEventListener('click', this.closeMenu);
      }, 200);
    },
    closeMenu() {
      this.activeItem.isShow = false;
      this.activeItem = null;
      document.body.removeEventListener('click', this.closeMenu);
    },
    // 面包屑导航跳转
    resetFolder(item, index) {
      if (item.id === 0) {
        if (this.store.breadcrumb.length !== 0) {
          this.$store.commit('matlab/resetTreeData');
        }
      } else {
        if (index !== this.store.breadcrumb.length - 1) {
          this.$store.commit('matlab/resetBreadcrumb', {
            type: 'delete',
            item,
            index
          });
        }
      }
    },
    // 下拉选择路径
    changeFolder(item, index) {
      this.closeMenu();
      const flag =
        this.store.breadcrumb.length === 0 ||
        index === this.store.breadcrumb.length ||
        this.store.breadcrumb[index].id !== item.id;
      if (flag) {
        this.$store.commit('matlab/resetBreadcrumb', {
          type: 'change',
          item,
          index,
          bread: [item]
        });
      }
    },
    isFolderShow(arr) {
      if (arr instanceof Array) {
        let flag = false;
        arr.map((item) => {
          if (!item.isFile) {
            flag = true;
          }
        });
        return flag;
      }
      return false;
    },
    // 手输导航栏
    searchFolder() {
      this.restaurants = [];
      this.state = this.store.breadPath;
      this.restaurants.push(
        {
          value: 'test',
          data: { id: 0 }
        }
      );
      this.getFolder(this.$store.state.matlab.originTreeData);
      // this.isEdit = true;
    },
    getFolder(data) {
      data.map((item) => {
        if (!item.isFile) {
          const path = 'test/' + (item.path ? `${item.path}/${item.label}` : item.label);
          this.restaurants.push({
            value: path,
            data: item
          });
          if (item.children.length) {
            this.getFolder(item.children);
          }
        }
      });
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    // 选择目录
    handleSelect(item) {
      this.$emit('jumpFolder', item.data.id);
      this.isEdit = false;
    },
    // 输入框失去焦点时
    inputBlur() {
      // TODO 为啥要定时器呢
      setTimeout(() => {
        this.isEdit = false;
      }, 100);
    }
  }
};
</script>

<style lang="scss" scoped>
.navigation {
  height: 26px;
  padding: 1px 5px;
  border-bottom: 1px solid #e5e5e5;
  position: relative;
  z-index: 10;

  .navigation-icon-bg {
    width: 22px;
    height: 22px;
    margin-top: 1px;
    margin-right: 5px;
    border-radius: 5px;
    border: 1px solid transparent;

    &:hover {
      border-color: #a8a8a8;
    }

    .navigation-icon {
      width: 16px;
      height: 16px;
      margin: 2px;
      opacity: 1;
    }

    &.disabled {
      border-color: transparent;

      .navigation-icon {
        opacity: 0.3;
      }
    }
  }

  .breadcrumb {
    border: 1px solid #e5e5e5;
  }

  .breadcrumb-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

  .breadcrumb-bg {
    position: absolute;
    height: 22px;
    line-height: 22px;
    padding: 0 15px;
    font-size: 12px;
    user-select: none;
    z-index: 1;
  }

  .bread-bg {
    &:hover {
      .bread-data,
      i {
        border-color: #808080;
      }
    }

    .bread-data {
      padding: 0 5px;
      border-left: 1px solid transparent;
      border-right: 1px solid transparent;
    }

    i {
      font-size: 12px;
      line-height: 22px;
      border-right: 1px solid transparent;
    }

    .bread-data:hover,
    i:hover {
      background: #f5f5f5;
    }

    .el-icon-arrow-down {
      position: relative;

      .menu-folder {
        width:170px;
        position: absolute;
        left: 0;
        top: 18px;
        z-index: 100;
      }
    }
  }
}
.icon-style {
  width: 16px;
  height: 16px;
  margin-top: 9px;
  margin-right: 5px;
}
::v-deep .el-autocomplete {
  width: 100%;

  .el-input--mini .el-input__inner {
    height: 23px;
    line-height: 23px;
  }
}
.my-autocomplete {
  width: 300px;

  li {
    line-height: normal;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}
.menu-item {
  width: fit-content !important;
}
</style>
